<template>
	<!-- 卖家备注弹出层 -->
	<uni-popup ref="remarkPopup" type="center">
		<view class="popup" @touchmove.prevent.stop>
			<view class="popup-header">
				<text class="tit">出行时间修改</text>
				<text class="iconfont iconclose" @click="close()"></text>
			</view>
			<!-- <picker mode="datetime" :value="dateform.startTime" :start="startDate" :end="dateform.overTime"
				@change="bindDateChange">
				<view class="uni-input" v-if="dateform.startTime===''">开始时间</view>
				<view class="uni-input" v-else>{{dateform.startTime}}</view>
			</picker> -->
			
			<uni-datetime-picker v-model="travelers" type="datetime" class="uni-date-editor">
				<text class="uni-date" :class="travelers ? 'nomal-text' : 'travelers-text'">{{travelers? travelers : '请选择参观日期'}}<text class="chuxing iconfont iconright"></text></text>
			</uni-datetime-picker>
			
			<view class="popup-footer">
				<button type="primary" @click="saveRemark()">确定</button>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	
import uniDatetimePicker from '@/components/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue';
		
export default {
	data() {
		return {
			callback: null,
			repeatFlag: false,
			travelers:'',
			dateform: {
				startTime: '',
				overTime: '',
			},
			
		};
	},
	
	components: {
		uniDatetimePicker
	},
	
	props: {
		order: {
			type: Object,
			default: () => {
				return {
					remark: ''
				};
			}
		}
	},
	methods: {
		
		show(callback) {
			this.callback = callback;
			this.$refs['remarkPopup'].open();
		},
		close() {
			this.$refs['remarkPopup'].close();
		},
		saveRemark() {
			if (this.travelers=='') {
				this.$util.showToast({
					title: '请输选择时间'
				});
				return;
			}

			if (this.repeatFlag) return;
			this.repeatFlag = true;
			this.$api.sendRequest({
				url: '/shopapi/order/saveTravelersTime',
				data: {
					order_id: this.order.order_id,
					travelers_time: this.travelers
				},
				success: res => {
					if (res.code == 0) {
						if (this.callback) this.callback();
						this.close();
					}
					this.repeatFlag = false;
					this.$util.showToast({
						title: res.message
					});
				}
			});
		}
	}
};
</script>

<style scoped>
/deep/ .uni-date-editor {
		    text-align: center;
		    margin: 2% 0;
}
/deep/ .uni-datetime-picker-text {
    font-size: 23px;
}
</style>


<style lang="scss">
.popup {
	width: 80vw;
	background: #fff;
	border-top-left-radius: 24rpx;
	border-top-right-radius: 24rpx;

	.popup-header {
		display: flex;
		border-bottom: 2rpx solid $color-line;
		position: relative;
		padding: 40rpx;

		.tit {
			flex: 1;
			font-size: $font-size-toolbar;
			line-height: 1;
			text-align: center;
		}
		.iconfont {
			line-height: 1;
			position: absolute;
			right: 30rpx;
			top: 50%;
			transform: translate(0, -50%);
			color: $color-tip;
			font-size: $font-size-toolbar;
		}
	}

	.popup-body {
		padding: 20rpx;
		textarea {
			width: 100%;
		}
	}

	.popup-footer {
		height: 120rpx;
	}
}
</style>
